<template>
  <div>
    <div id="buju">
      <div id="sanlu">      
        <button @click="funa()" :class="boola?'blue':''">前端开发<br>13部</button>
        <button @click="funb()" :class="boolb?'blue':''">服务端相关<br>22部</button>
        <button @click="func()" :class="boolc?'blue':''">Java<br>19部</button>
        <button @click="fund()" :class="boold?'blue':''">Python<br>11部</button>
        <button @click="fune()" :class="boole?'blue':''">数据库<br>3部</button>
        <component :is="hello"></component>
      </div>
    </div>
    
  </div>

</template>

<script>
import Fuwu from '@/components/homecomp/dxy/fuwu.vue'
import H5 from '@/components/homecomp/dxy/h5.vue'
import Java from '@/components/homecomp/dxy/java.vue'
import Python from '@/components/homecomp/dxy/python.vue'
import Shujuku from '@/components/homecomp/dxy/shujuku.vue'
export default {
  components:{
    Fuwu,Java,Python,Shujuku,H5
  },
  data(){
    return {
      boola:true,boolb:false,boolc:false,boold:false,boole:false,
      hello:H5,
    }
  },
  methods:{
    funa(){
      this.hello='H5'
      this.boola = !this.boola
      if(this.boola==true){
        this.boolb=false
        this.boolc=false
        this.boold=false
        this.boole=false
      }
    },
    funb(){
      this.hello='Fuwu'
      this.boolb = !this.boolb
      if(this.boolb==true){
        this.boola=false
        this.boolc=false
        this.boold=false
        this.boole=false
      }
    },
    func(){
      this.hello='Java'
      this.boolc = !this.boolc
      if(this.boolc==true){
        this.boolb=false
        this.boola=false
        this.boold=false
        this.boole=false
      }
    },
    fund(){
      this.hello='Python'
      this.boold = !this.boold
      if(this.boold==true){
        this.boolb=false
        this.boolc=false
        this.boola=false
        this.boole=false
      }
    },
    fune(){
      
      this.hello='Shujuku'
      this.boole = !this.boole
      if(this.boole==true){
        this.boolb=false
        this.boolc=false
        this.boold=false
        this.boola=false
      }
    }
  }
}

</script>

<style scoped>
  #buju{
    width: 100%;
    padding: 0rem .16rem;
    margin-top: .2rem;
  }
  #sanlu{
    width: 100%;
    height: 1.3rem;
    /* background: cadetblue; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  button{
    width: 1.1rem;
    height: .5rem;
    margin: .02rem;
    outline: none;
    border: none;
    border-radius: 8px;
    background-color: #f5f8ff;
  }
  .blue{
    background-color: #426bff;
    color: white;
  }
</style>